<template>
	<uv-popup ref="popup" mode="center">
		<view class="content">
			<uv-form labelPosition="left" :model="formData" :rules="rules" ref="form">
				<uv-form-item label="群组名称" prop="groupName" borderBottom>
					<uv-input v-model="formData.groupName" border="none" placeholder="请输入群组名称">
					</uv-input>
				</uv-form-item>
				<uv-button type="primary" text="确认" customStyle="margin-top: 10px" @click="submit"></uv-button>
			</uv-form>
		</view>
	</uv-popup>
</template>
<script setup>
	import { reactive, ref, watch } from 'vue';
	const popup = ref(null);
	const form = ref(null);
	const name = ref('');
	const formData = reactive({
		groupName: ''
	})
	const rules = {
		groupName: {
			type: 'string',
			required: true,
			message: '请输入群组名称',
			trigger: ['blur', 'change']
		}
	}
	const emits = defineEmits(['confirm']);
	const props = defineProps({
		groupName: {
			type: String,
			default: ''
		}
	})
	watch(() => props.groupName, (newVal) => {
		if (newVal) {
			formData.groupName = newVal;
		}
	})

	function submit() {
		form.value.validate().then(res => {
			emits('confirm', {
				type: name.value,
				groupName: formData.groupName
			});
			popup.value.close();
		}).catch(errors => {
			uni.showToast({
				icon: 'error',
				title: '校验失败'
			})
		})
	}

	function open(v = '') {
		name.value = v;
		popup.value.open();
	}
	defineExpose({
		open
	})
</script>
<style scoped lang="scss">
	.content {
		width: 400px;
	}
</style>